<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>批量研发打卡</title>
	<script th:src="@{/js/jquery.min.js}"></script>
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<!-- bootstrap-table 表格插件样式 -->
	<link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css?v=20210602}" rel="stylesheet"/>
	<link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
	<link th:href="@{/css/style.min.css?v=20200903}" rel="stylesheet"/>
	<link th:href="@{/ruoyi/css/ry-ui.css?v=4.6.2}" rel="stylesheet"/>
    
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    
            <!-- <script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script> -->
    <script src="/wechat/vue@3.2.27-vue.global.js" type="text/javascript"></script>
    
    <!-- 导入样式 -->
  	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
  	<link rel="stylesheet" href="/wechat/element-plus@2.0.3-index.css" />
  	<!-- 导入组件库 -->
    <!--  <script src="//unpkg.com/element-plus"></script> -->
    <script src="/wechat/element-plus@2.0.3-index.full.js" type="text/javascript"></script>
    
    <!-- axios -->
<!--     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script src="/wechat/axios@0.26.0-axios.min.js" type="text/javascript"></script>
    <script src="/wechat/qs@6.7.0-qs.min.js" type="text/javascript"></script>
    
<!--     <script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script>
    导入样式
  	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  	导入组件库
    <script src="//unpkg.com/element-plus"></script>
    axios
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    
    <style>
    	.el-cascader__dropdown {
    		right: 5px;
    		overflow: scroll;
    	}
    	.el-cascader-panel {
    		width: fit-content;
    	}
    	
    	.row {
    		display:flex;
    		flex-direction:row;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.row-ai-c {
    		align-items:center;
    	}
    	.row-jc-sb {
    		justify-content: space-between;
    	}
    	.row-jc-sa {
    		justify-content: space-around;
    	}
    	
    	
    	.column {
    	    display:flex;
    		flex-direction:column;
    		/*
    		justify-content:center;
    		align-items:center;
    		*/
    	}
    	.column-ai-c {
    		align-items:center;
    	}
    	
    	/* ------------------------- */
    	.col-aw-sb-ct-0 {
    		width:auto;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.col-fw-sa-fs-1 {
    		width:100%;
    	    display: flex;
    		flex-direction: column;
    		justify-content: space-around;
    		align-items: flex-start;
    		flex-grow: 1;
    	}
    	.row-fw-sb-ct-0 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 0;
    	}
    	.row-fw-sb-ct-1 {
    		width: 100%;
    	    display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		flex-grow: 1;
    	}
    	
    	/* ------------------------------- */
    	.icon {
    		background-repeat: no-repeat;
    		background-position: center;
    		background-size: cover;
    	}
    	.i-sm {
    		width: calc(14.58px * 0.5);
    		height: calc(26.7px * 0.5);
    	}
    	.i-md {
    		width: calc(24px * 1);
    		height: calc(24px * 1);
    	}
    	.i-arrow-right {
    		background-image: url("/img/arrow_right.png");
    	}
    	.i-iconography_caesarzkn {
    		background-image: url("/img/icon2.png");
    	}
    </style>
    <style>
    	* {
    		padding: 0px;
    		margin: 0px;
    	}
    	html, body, #app {
    		padding: 0px;
    		margin: 0px;
    		height: 100%;
    	}
    	body {
    		background-color:#E9E9E9;
    	}
    	
    	#app {
    		display:flex;
    		flex-direction:column;
    	}
    	
    	.title-bar {
    		text-align:center;
    		background-color:#66CE57;
    		height:50px;
    		line-height:50px;
    		width:100%;
    		color:white;
    	}
    	
    	.content-area {
    		display:flex;
    		flex-direction:column;
    		align-items:center;
    		flex-grow:1;
    	}
    	.project-sel {
    		background-color:#E9E9E9;
    		width:100%;
    		height:60px;
    		padding-top:10px;
    		padding-bottom:10px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    	.project-sel1 {
    		background-color:#E9E9E9;
    		width:100%;
    		height:auto;
    		padding-top:10px;
    		padding-bottom:10px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    	.sel-item {
    		background-color:red;
    	}
    	
    	.selector {
    		background:none;
    		background-color:transparent;
    		flex-grow:1;
    		margin-left:10px;
    		margin-right:10px;
    	}
    	
    	.el-cascader {
    		flex-grow:1;
    		width: 100% !important;
    		padding-left:12px;
    	}
    	.el-date-editor {
    		width: 100% !important;
    	}
    	.el-date-editor .el-input__inner {
		    padding-left: 12px !important;
		}
		.el-date-editor .el-input__prefix {
			display:none;
		}
    	
    	/* 去掉输入框的边框和背景 */
    	.el-input__inner {
    	    box-shadow: 0 0 0 0px red inset!important;
    		/* ------------------------------------ */
    		background-color:transparent; 
    		background:none;
    		/* ------------------------------------ */
    		padding-left: 0px;
    		padding-right: 0px !important;
    	}
    	.el-input.is-focus .el-input__inner {
		    box-shadow: 0 0 0 0px red inset!important;
		}
		.el-select:hover:not(.el-select--disabled) .el-input__inner{
			box-shadow: 0 0 0 0px red inset!important;
		}
		.el-select .el-input__inner:focus{
			 box-shadow: 0 0 0 0px red inset!important;
		}
    	.el-input__suffix{
    		display:none;
    	}
    </style>
    
    <style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<style type="text/css">
	#dateOp {
		padding-left: 10px;
		width: 100%;
	}
	
    #dateOp select{
      width:25%;
    }
  </style>
</head>

<body>
    <div id="app">
	  <div class="title-bar" v-on:click="switchTimeComp">
	  	批量设备打卡
	  </div>
	  <div class="content-area">
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn"></div>
		     <el-select filterable :change="projectSelect" v-model="personProjectId" :suffix-icon="ArrowDown" placeholder="请选择项目（支持搜索）" class="selector">
			    <el-option
			      v-for="item in projects"
			      :key="item.id"
			      :label="item.text"
			      :value="item.id"
			    >
			    </el-option>
			  </el-select>
		    <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>

		  <div class="project-sel1 row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;">
		     <div class="icon i-md i-iconography_caesarzkn"></div>
		     <el-cascader style="" :options="options" :props="props" v-model="devicesIds"></el-cascader>
		     <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>

		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <div id="dateOp">
			  <select id="selectYear" onchange="getDay()"></select>年
			  <select id="selectMonth" onchange="getDay()"></select>月
			  <select id="selectDay"></select>日
			</div>
		    <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
			     <div id="dateOp">
				  <select id="selectHour"></select>时
				  <select id="selectMin"></select>分
				  <select id="selectSec"></select>秒
				</div>
		     <el-tag type="info">打卡时间</el-tag>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="!this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-date-picker value-format="YYYY-MM-DD" :change="dateSelect()" v-model="clockdatetime" type="date" placeholder="Pick a day"></el-date-picker>
		     <div class="icon i-sm i-arrow-right" style=""></div>
		  </div>
		  
		  <div class="project-sel row row-ai-c" style="border-bottom: 1px dashed #D3D3D3;" v-show="!this.timecomp">
		     <div class="icon i-md i-iconography_caesarzkn" style=""></div>
		     <el-date-picker type="datetime"  v-model="clockdatetime2" placeholder="请选择打卡时间"></el-date-picker>
		     <el-tag type="info">打卡时间</el-tag>
		  </div>
		  
		  <div class="col-fw-sa-fs-1" style="border-bottom: 1px dashed #D3D3D3;display:none;">
		  	<div class="row-fw-sb-ct-1" style="background-color:#E7E7E7; padding: 15px;">
			  	<div class="col-aw-sb-ct-0" style="">
			  		<div style="font-size: 32px;color:#67CE57">{{ shangbanTime }}</div>
			  		<div style="font-size: 18px;color: #ADC8A9;">{{ sbstatus }}</div>
			  	</div>
			  	<el-switch
			    	v-model="value2"
			    	active-color="#13ce66"
			    	inactive-color="#ff4949"
			    />
		  	</div>
		  	
		  	<div class="row-fw-sb-ct-1" style="background-color:#E2E2E2; padding: 15px;">
			  	<div class="col-aw-sb-ct-0" style="">
			  		<div style="font-size: 32px;color:#67CE57">{{ xiabanTime }}</div>
			  		<div style="font-size: 18px;color: #ADC8A9;">{{ xbstatus }}</div>
			  	</div>
			  	<el-switch
			    	v-model="value2"
			    	active-color="#13ce66"
			    	inactive-color="#ff4949"
			    />
		    </div>
		  </div>
		  
		  <div class="row row-jc-sa" style="overflow:hidden;background-color:#E4E4E4;width:100%;height:120px;padding-top:20px;padding-bottom:20px;">
		  		<div @click="sbclock" style="background-color:#60C952;width:80px;height:80px;border-radius:80px;line-height:80px;text-align:center;color:white;">开始</div>
		  		<div @click="xbclock" style="background-color:#60C952;width:80px;height:80px;border-radius:80px;line-height:86px;text-align:center;color:white;">结束</div>
		  </div>
	  </div>
	</div>
	
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    
    <script th:inline="javascript">
	// 为给定 ID 的 user 创建请求

	//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

	
	Date.prototype.format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, //月份
	        "d+": this.getDate(), //日
	        "h+": this.getHours(), //小时
	        "m+": this.getMinutes(), //分
	        "s+": this.getSeconds(), //秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	        "S": this.getMilliseconds() //毫秒
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}
 
       var user = [[${LOGINNAME}]];
       var personId = [[${USERID}]];
       var id=1;
    
    	const App = {
   		  data() {
   		    return {
   		      clockdatetime: new Date().format("yyyy-MM-dd"),
   		      clockdatetime2: new Date(),
   		      personProjectId: null,
   		      startDatetime:null,
   		      endDatetime:null,
   		   	  devicesIds:[],
   		      
   		      value2: true,
   		   	  projects: [],
   		   	  persions:[],
   		   	  
   		   	  shangbanTime:"--:--",
   		   	  xiabanTime:"--:--",
   		   	  
   		   timecomp:localStorage && localStorage.getItem("timecomp") === "true",
   		   	  
   		   	  
   		   options: [{
   	          id: 'zhinan',
   	          text: '指南'
   	          }],
   	        props: {
   	          value: 'id',
   	          label: 'text',
   	          multiple: true,
   	          lazy: true,
   	          lazyLoad (node, resolve) {
   	            const { level } = node;
   	            console.log(node)
   	            setTimeout(() => {
   		   		  
   	            axios.get('/system/devices/select2?devicePosition=' + node.data.id)
   		   	      .then(function (response) {
   		   	     	//that.options = response.data.results;
   		   	     	console.log(response.data.results);
   		   	  		resolve(response.data.results);
   		   	      })
   		   	      .catch(function (error) {
   		   	        console.log(error);
   		   	      });
   		   		  
   		   		  /*
   	              const nodes = Array.from({ length: level + 1 })
   	                .map(item => ({
   	                  id: ++window.id,
   	                  text: `选项${id}`,
   	                  leaf: level >= 1
   	                }));
   	              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
   	              resolve(nodes);
   	              */
   	            }, 0);
   	          }
   	        }
   		    }
   		  },
   		  methods:{
   			switchTimeComp(){
   				this.timecomp = !this.timecomp;
   				localStorage && localStorage.setItem("timecomp", this.timecomp ? "true" : "false");
   			},
   			sumbitClock(issb, clockdates){
   				let that = this;
   				let arr = [];
   				for(let i = 0; i < that.devicesIds.length; i++){
   					//alert(that.devicesIds[i].toString())
   					let v = that.devicesIds[i].toString().split(",");
   					arr.push(v[v.length - 1]);
   				}
   				
				let cdt = "";
   				
   				if(that.timecomp){
   					var selectYear = document.getElementById("selectYear");
   		   		    var selectMonth = document.getElementById("selectMonth");
   		   		    var selectDay = document.getElementById("selectDay");
   		   		    
  	  		  		cdt = `${selectYear.value}-${selectMonth.value}-${selectDay.value}`;
   				}else{
   					cdt = that.clockdatetime;
   				}
   				
   				axios.post('/system/dclock/dlclock', Qs.stringify({
   					projectId: that.personProjectId,
		   			clockdatetime: cdt,
		   			ids: arr.toString(),
		   			issb: issb,
		   			clockdates,clockdates,
		   			operate: window.personId,
		   		  }))
		   	      .then(function (response) {
		   	        console.log(response);
		   	        
		   	        alert("打卡成功");
		   	        
		   	        that.refreshClock();
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });	
   			},
   			refreshClock(){
   			  	let that = this;
  	   		  	
   			},
   			persionSelect(v){

   			},
   			dateSelect(v){

   			},
   			projectSelect(v){
   				
   			},
   			sbclock(v){
   				if(this.personProjectId == null){
   					alert("请选择打卡项目");
   					return;
   				}
   				if(this.devicesIds.length == 0){
   					alert("请选择打卡设备");
   					return;
   				}
   				//let sbd = new Date().format("yyyy-MM-dd hh:mm:ss");
   				//let sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   				let sbd = "";
   				if(!this.timecomp){
   					// sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   					//sbd = this.clockdatetime + " " + this.clockdatetime2.format("hh:mm");
   					
   					sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   				}else{
   					var selectYear = document.getElementById("selectYear");
   		   		    var selectMonth = document.getElementById("selectMonth");
   		   		    var selectDay = document.getElementById("selectDay");
   		   		   var selectHour = document.getElementById("selectHour");
  	  		      var selectMin = document.getElementById("selectMin");
  	  		      var selectSec = document.getElementById("selectSec");
   		   		    
   		   		    sbd = `${selectYear.value}-${selectMonth.value}-${selectDay.value} ${selectHour.value}:${selectMin.value}`;
   				}
   				this.sumbitClock(true, sbd);
   			},
   			xbclock(v){
   				if(this.personProjectId == null){
   					alert("请选择打卡项目");
   					return;
   				}
   				if(this.devicesIds.length == 0){
   					alert("请选择打卡设备");
   					return;
   				}
   				//let sbd = new Date().format("yyyy-MM-dd hh:mm:ss");
   				//let sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   				let sbd = "";
   				if(!this.timecomp){
   					// sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   					//sbd = this.clockdatetime + " " + this.clockdatetime2.format("hh:mm");
   					sbd = this.clockdatetime2.format("yyyy-MM-dd hh:mm");
   				}else{
   					var selectYear = document.getElementById("selectYear");
   		   		    var selectMonth = document.getElementById("selectMonth");
   		   		    var selectDay = document.getElementById("selectDay");
   		   		   var selectHour = document.getElementById("selectHour");
  	  		      var selectMin = document.getElementById("selectMin");
  	  		      var selectSec = document.getElementById("selectSec");
   		   		    
   		   		    sbd = `${selectYear.value}-${selectMonth.value}-${selectDay.value} ${selectHour.value}:${selectMin.value}`;
   				}
   				this.sumbitClock(false, sbd);
   			}
   		  },
   		computed: {
   		  sbstatus () {
   		    return (this.shangbanTime != "--:--" && this.shangbanTime != null) ? "已打卡" : "未打卡";
   		  },
   		  xbstatus () {
   		    return (this.xiabanTime != "--:--" && this.xiabanTime != null) ? "已打卡" : "未打卡";
   		  },
   		},
   		mounted(){
   			
   	   		//得到三个select项
   	   		window.getYear = getYear;
   	   		window.getMonth = getMonth;
   	   		window.getDay = getDay;
   	   		window.setDay = setDay;
   	 		   
   		   		  
   		   		var startYear = 2000;
   	  			var endYear = 2050;
   	  			var date = new Date();
   		  		  var year = date.getFullYear();
   		  		  var month = date.getMonth() + 1;
   		  		  var day = date.getDate();
   		   		  var selectYearElement = document.getElementById("selectYear");
   		   		  var selectMonthElement = document.getElementById("selectMonth");
   		   		  var selectDayElement = document.getElementById("selectDay");
   		   		  //selectYearElement.onchange = getDay();
   		   		  //selectMonthElement.onchange = getDay();
   		   		  //selectYearElement.addEventListener
   		   		  getYear();
   		   		  getMonth();
   		   		  getDay();
   		   		  //年份函数
   		   		  function getYear() {
   		   		    for (var i = startYear; i <= endYear; i++) {
   		   		      var opYearElement = document.createElement("option");
   		   		      var textElement = document.createTextNode(i);
   		   		      opYearElement.appendChild(textElement);
   		   		      opYearElement.value = i;
   		   		      selectYearElement.appendChild(opYearElement);
   		   		    }
   		   		//设置默认年份的值
   		   		    selectYearElement.selectedIndex = year - startYear;
   		   		  }
   		   		  
   		   		  
   		   		  //月份函数
   		   		  function getMonth() {
   		   		    for (var i = 1; i <= 12; i++) {
   		   		      var opMonthElement = document.createElement("option");
   		   		      textMonth = document.createTextNode(i);
   		   		      opMonthElement.appendChild(textMonth);
   		   		      opMonthElement.value = i;
   		   		      selectMonthElement.appendChild(opMonthElement);
   		   		    }
   		   		//设置默认年份的值
   		   		    selectMonthElement.selectedIndex = month - 1;
   		   		  }
   		   		  
   		   		
   		   		
   		   		  //日期函数
   		   		  function getDay() {
   		   		    var getSelectedYear = selectYearElement.selectedIndex + startYear;
   		   		    var getSelectedMonth = selectMonthElement.selectedIndex + 1;
   		   		    var flag = 0;
   		   		    var selectDayElement = document.getElementById("selectDay");
   		   		    if (selectDayElement.hasChildNodes()) {
   		   		      var optionElements = selectDayElement.getElementsByTagName("option");
   		   		      for (var i = 0; i < optionElements.length; i++) {
   		   		        selectDayElement.removeChild(optionElements[0]);
   		   		//不知道为什么必须得自减一
   		   		        i--;
   		   		      }
   		   		    }
   		   		    else {
   		   		    }
   		   		//得到闰年
   		   		    if ((getSelectedYear % 4 == 0 && getSelectedYear % 100 != 0) || getSelectedYear % 400 == 0) {//得到闰年的年号
   		   		//alert("闰年");
   		   		//得到闰年大月份除二月以外
   		   		      if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
   		   		        setDay(flag = 31);
   		   		      }
   		   		      else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
   		   		        setDay(flag = 29);
   		   		      }
   		   		      else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
   		   		        setDay(flag = 30);
   		   		      }
   		   		    }
   		   		//非闰年
   		   		    else {
   		   		//alert("平年");
   		   		//得到平年大月份除二月以外
   		   		      if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 1 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 0)) {//得到大月
   		   		        setDay(flag = 31);
   		   		      }
   		   		      else if (getSelectedMonth <= 7 && getSelectedMonth == 2) {
   		   		        setDay(flag = 28);
   		   		      }
   		   		      else if ((getSelectedMonth <= 7 && getSelectedMonth % 2 == 0 && getSelectedMonth != 2) || (getSelectedMonth >= 8 && getSelectedMonth % 2 == 1)) {//得到小月份除二月以外
   		   		        setDay(flag = 30);
   		   		      }
   		   		    }
   		   		  }
   		   		  
   		   		
   		   		
   		   		  //设置默认年份的值
   		   		  selectDayElement.selectedIndex = day - 1;
   		   		  function setDay(dayLength) {
   		   		    for (var i = 1; i <= dayLength; i++) {
   		   		      var opDayElement = document.createElement("option");
   		   		      textMonth = document.createTextNode(i);
   		   		      opDayElement.appendChild(textMonth);
   		   		      opDayElement.value = i;
   		   		//alert(i);
   		   		      selectDayElement.appendChild(opDayElement);
   		   		    }
   		   		  }
   		   		
   		   		  
   		   	   	 // ------------------------------------------------------
   		     		
   		     	var selectHourElement = document.getElementById("selectHour");
   		  		  var selectMinElement = document.getElementById("selectMin");
   		  		  var selectSecElement = document.getElementById("selectSec");
   		   		
   		  		  for (let i = 0; i <= 23; i++) {
   		  		      let opYearElement = document.createElement("option");
   		  		      let textElement = document.createTextNode(i);
   		  		      opYearElement.appendChild(textElement);
   		  		      opYearElement.value = i;
   		  		    selectHourElement.appendChild(opYearElement);
   		  		    }
   		  		    //设置默认时间
   		  		    selectHourElement.selectedIndex = date.getHours();
   		  		    
   		  		  for (let i = 0; i <= 59; i++) {
   		  		      let opYearElement = document.createElement("option");
   		  		      let textElement = document.createTextNode(i);
   		  		      opYearElement.appendChild(textElement);
   		  		      opYearElement.value = i;
   		  		    selectMinElement.appendChild(opYearElement);
   		  		    }
   		  		    //设置默认分钟
   		  		    selectMinElement.selectedIndex = date.getMinutes(); 
   		  		    
   		  		  for (let i = 0; i <= 59; i++) {
   		  		      let opYearElement = document.createElement("option");
   		  		      let textElement = document.createTextNode(i);
   		  		      opYearElement.appendChild(textElement);
   		  		      opYearElement.value = i;
   		  		    selectSecElement.appendChild(opYearElement);
   		  		    }
   		  		    //设置默认分钟
   		  		    selectSecElement.selectedIndex = 0;//date.getSeconds(); 
   		   		   // ------------------------------------------------------
   	   		},
   		  created(){
   			  let that = this;
	   		  axios.get('/system/project/select2')
		   	      .then(function (response) {
		   	     	that.projects = response.data.results;
		   	      })
		   	      .catch(function (error) {
		   	        console.log(error);
		   	      });
	   		  
	   		  axios.get('/system/user/select2')
	   	      .then(function (response) {
	   	     	that.persions = response.data.results;
	   	      })
	   	      .catch(function (error) {
	   	        console.log(error);
	   	      });
	   		  
	   		  axios.get('/system/positions/select2')
	   	      .then(function (response) {
	   	     	that.options = response.data.results;
	   	      })
	   	      .catch(function (error) {
	   	        console.log(error);
	   	      });
   		  }
   		}

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>
</html>